<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #bod {
        width: 100px;
        height: 20px;
      }
    </style>
    <div>
      撒旦 dsav
      <div>大萨达所</div>
      <div>cdasd</div>
    </div>
  </head>
  <body>
    <script>
      var obj1 = {
        name: 'zhangsan',
        age: 14,
        hobby: ['篮球', '足球', '羽毛球'],
        children: {
          name: 'son',
          age: 5,
          children: {
            name: 'sonson',
            age: 1,
            hobby: ['吃饭', '睡觉', '大豆'],
          },
        },
      }
      var obj2 = {
        name2: 'lisi',
        age2: '18',
        hobby2: ['电脑', '吃鸡0', 'dnf'],
      }

      //   问题1：如果按照正常的对象拷贝的话 键的值为数字或者字符串可以正常拷贝
      //   但是如果为对象或者数组就无法完全拷贝 只能浅拷贝到他的地址 当修改拷贝后的对象里面的对象或数组 会影响原来的对象
      // 演示：
      function merge(a, b) {
        var o = {}
        for (k in a) {
          o[k] = a[k]
        }
        for (k in b) {
          o[k] = b[k]
        }
        return o
      }
      var result = merge(obj1, obj2)
      console.log(result)

      //   对象深拷贝
      function copyDeep(obj) {
        var o = {}
        var k = null
        //    遍历对象 判断对象中每个属性的数据类型
        for (k in obj) {
          // 判断数据类型 如果是数组 遍历数组
          if (obj[k] instanceof Array) {
            var newArr = []
            obj[k].forEach((vall) => {
              newArr.push(vall)
            })
            o[k] = newArr
          } else if (obj[k] instanceof Object) {
            o[k] = copyDeep(obj[k], o)
          } else {
            o[k] = obj[k]
          }
        }
        return o
      }

      var result = copyDeep(obj1)

      result.children.name = 'lisi'
      result.children.children.hobby[0] = '大长腿'
      console.log(result, obj1)
    </script>
  </body>
</html>
